import React from 'react';

import { Layout } from 'antd';
import { Menu } from 'antd';
import { Outlet, useNavigate } from "react-router-dom"


const { Sider, Content } = Layout;
interface Props {

}
interface MenuItem {
    item: object
    key: string
}


function Staffcenter(props: Props) {
    var navigate = useNavigate()
    var handleClick = function ({ item, key }: MenuItem) {
        console.log(key);
        navigate(key)
    }
    return (
        <Layout className='staffcenter'>
            <Sider theme='light'>
                <Menu className='mymenu' theme='light' mode='inline' defaultSelectedKeys={['/index/staffcenter/Personmanage']} onClick={handleClick}>
                    <Menu.Item key="/index/staffcenter/Personmanage" >员工管理</Menu.Item>
                    <Menu.Item key="/index/staffcenter/Staffmanage" >角色权限管理</Menu.Item>
                </Menu>
            </Sider>
            <Content style={{ padding: 20 }}>
                <Outlet></Outlet>
            </Content>
        </Layout>
    );


}
export default Staffcenter;